<div class="lv-calendar-container">
  <!-- 日历头部 -->
  <div class="lv-canlendar-header">
    <div class="lv-canlendar-header-left">
      <ng-container *ngIf="lvCalendarHeaderLeft !== null">
        <ng-container *ngTemplateOutlet="lvCalendarHeaderLeft; context: { $implicit: activeDateDay }"></ng-container>
      </ng-container>
    </div>

    <div class="lv-canlendar-header-center">
      <div class="left">
        <i lv-icon="lv-icon-arrow-double-prev" lvColorState="true" (click)="changeDate(-1, 'year')"></i>
        <i lv-icon="lv-icon-arrow-prev" *ngIf="currentMode === 'month'" lvColorState="true" (click)="changeDate(-1, 'month')"></i>
      </div>

      <ng-container *ngIf="lvCalendarTitleReadonly">
        <div *ngIf="language == 'zh-cn'" class="center readonly">
          <span>{{ activeDateYear }}{{ 'year' | i18n }}</span>
          <span *ngIf="currentMode === 'month'">{{ activeDateMonth }}{{ 'month' | i18n }}</span>
        </div>
        <div *ngIf="language == 'en-us'" class="center readonly">
          <span *ngIf="currentMode === 'month'">{{ activeDateMonth }},</span>
          <span>{{ activeDateYear }}</span>
        </div>
      </ng-container>

      <ng-container *ngIf="!lvCalendarTitleReadonly">
        <div *ngIf="language == 'zh-cn'" class="center" (click)="toggleOpen()">
          <span>{{ activeDateYear }}{{ 'year' | i18n }}</span>
          <span *ngIf="currentMode === 'month'">{{ activeDateMonth }}{{ 'month' | i18n }}</span>
        </div>
        <div *ngIf="language == 'en-us'" class="center" (click)="toggleOpen()">
          <span *ngIf="currentMode === 'month'">{{ activeDateMonth }},</span>
          <span>{{ activeDateYear }}</span>
        </div>
      </ng-container>

      <div class="right">
        <i lv-icon="lv-icon-arrow-next" *ngIf="currentMode === 'month'" lvColorState="true" (click)="changeDate(1, 'month')"></i>
        <i lv-icon="lv-icon-arrow-double-next" lvColorState="true" (click)="changeDate(1, 'year')"></i>
      </div>
    </div>

    <div class="lv-canlendar-header-right">
      <ng-container *ngIf="lvCalendarHeaderRight === null">
        <!-- 切换mode -->
        <div class="lv-canlendar-change-mode">
          <lv-radio-group
            class="lv-calendar-mode-switch"
            [(ngModel)]="currentMode"
            [lvGroupName]="'changeMode'"
            (ngModelChange)="modeChange($event)"
          >
            <lv-group>
              <lv-radio [lvViewType]="'button'" [lvValue]="'month'">{{ 'month' | i18n }}</lv-radio>
              <lv-radio [lvViewType]="'button'" [lvValue]="'year'">{{ 'year' | i18n }}</lv-radio>
            </lv-group>
          </lv-radio-group>
        </div>
      </ng-container>

      <ng-container *ngIf="lvCalendarHeaderRight !== null">
        <ng-container *ngTemplateOutlet="lvCalendarHeaderRight; context: { $implicit: activeDateDay }"></ng-container>
      </ng-container>
    </div>
  </div>

  <!-- 日历主体 -->
  <div class="lv-calendar-body">
    <ng-container *ngIf="currentMode === 'month'">
      <div class="lv-calendar-cell-header">
        <ul>
          <li *ngFor="let C_weekDay of C_weekDays; trackBy: trackByIndex">
            <span *ngIf="language == 'en-us'">{{ C_weekDay.short }}</span>
            <span *ngIf="language == 'zh-cn'">{{ C_weekDay.short }}</span>
          </li>
        </ul>
      </div>
      <div class="lv-calendar-cell-body" [class.lv-resizer]="lvResize" (mouseleave)="cellMouseLeave()" #cellBody>
        <ul class="lv-calendar-cell-row" *ngFor="let C_row of C_rows; let i = index; trackBy: trackByIndex">
          <ng-container *ngFor="let C_cell of C_row.cells; trackBy: trackByIndex">
            <li
              *ngIf="lvOnlyShowActiveCell && (C_cell.isLastMonth || C_cell.isNextMonth)"
              [ngClass]="C_cell.classMap"
              [title]="C_cell.title"
            >
              <span class="lv-calendar-cell-hide"></span>
            </li>

            <li
              *ngIf="!(lvOnlyShowActiveCell && (C_cell.isLastMonth || C_cell.isNextMonth))"
              [ngClass]="C_cell.classMap"
              [title]="C_cell.title"
              (mouseenter)="C_cell.mouseenter()"
              (click)="selectCalendarCell(C_cell)"
            >
              <span *ngIf="lvCalendarCell === null" class="lv-calendar-cell">
                {{ C_cell.content }}
              </span>
              <span *ngIf="lvCalendarCell !== null">
                <ng-container *ngTemplateOutlet="lvCalendarCell; context: { $implicit: C_cell }"></ng-container>
              </span>
            </li>
          </ng-container>

          <!-- 事件 -->
          <div class="lv-calendar-day-event-row" [style.overflow-y]="isChrome ? 'overlay' : 'auto'">
            <ul>
              <ng-container *ngFor="let event of eventRows[i]?.eventItems; let eventIndex = index; trackBy: trackByIndex">
                <li class="lv-calendar-event-item" [style]="{ left: event.left + '%', top: event.top + 'px', width: event.width + '%' }">
                  <div *ngIf="lvCalendarEventCell === null" class="lv-calendar-event-item-title" lv-overflow>{{ event.title }}</div>

                  <ng-container *ngIf="lvCalendarEventCell !== null">
                    <ng-container *ngTemplateOutlet="lvCalendarEventCell; context: { $implicit: event.originData }"></ng-container>
                  </ng-container>
                </li>
              </ng-container>
            </ul>
          </div>

          <!-- 触发拖拽 -->
          <div class="lv-calendar-cell-resize" (mousedown)="activeResize($event)"></div>
        </ul>

        <!-- resize 遮罩层，用于避免拖拽的时候出发tips -->
        <div class="lv-calendar-cell-resize-mark lv-display-none" #resizeMark></div>
        <!-- resize 辅助线 -->
        <div class="lv-calendar-cell-resize-line lv-display-none" #resizeLine></div>
      </div>
    </ng-container>

    <ng-container *ngIf="currentMode === 'year'">
      <div
        class="lv-calendar-month-body"
        [ngClass]="{ 'lv-calendar-month-body-independent': currentMode == 'year', 'lv-resizer': lvResize }"
      >
        <ul>
          <li
            *ngFor="let C_month of C_months; let i = index; trackBy: trackByIndex"
            [ngClass]="C_month.classMap"
            (click)="selectCalendarCell(C_month)"
          >
            <span *ngIf="lvCalendarCell === null" class="lv-calendar-month-cell">
              {{ C_month.content }}
            </span>

            <span *ngIf="lvCalendarCell !== null">
              <ng-container *ngTemplateOutlet="lvCalendarCell; context: { $implicit: C_month }"></ng-container>
            </span>
          </li>
        </ul>

        <!-- 事件 -->
        <ng-container *ngFor="let row of eventRows; trackBy: trackByIndex">
          <ul class="lv-calendar-month-event-row" [style.overflow-y]="isChrome ? 'overlay' : 'auto'">
            <ng-container *ngFor="let event of row?.eventItems; let eventIndex = index; trackBy: trackByIndex">
              <li class="lv-calendar-event-item" [style]="{ left: event.left + '%', top: event.top + 'px', width: event.width + '%' }">
                <div *ngIf="lvCalendarEventCell === null" class="lv-calendar-event-item-title" lv-overflow>{{ event?.title }}</div>

                <ng-container *ngIf="lvCalendarEventCell !== null">
                  <ng-container *ngTemplateOutlet="lvCalendarEventCell; context: { $implicit: event?.originData }"></ng-container>
                </ng-container>
              </li>
            </ng-container>
          </ul>
        </ng-container>
      </div>
    </ng-container>
  </div>
</div>

<!-- 快速切换日期 -->
<ng-template #calendarPanle>
  <lv-calendar-panel
    [lvMode]="currentMode"
    [lvActiveDate]="activeDate"
    (valueChange)="changeDate($event, null, 'picker')"
  ></lv-calendar-panel>
</ng-template>
